/**
 * 首页
 */
import React, { Component } from 'react';
import axios from "axios";
import { NavLink } from 'react-router-dom';
import { Row, Col, Input, Icon, Carousel, Layout } from 'antd';
import Commodity from '../common/Commodity';
import "./index.css";
import Main from '../common/Main';
const { Content } = Layout;
class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {
            scrollTop: 0,
            isShowCommdity: false
        }
    }
    componentDidMount() {
        var handleScroll = e => {
            var target = e.target;
            if (target) {
                this.setState({ scrollTop: target.scrollTop });
            }
        }
        var appContent = document.getElementsByClassName("index")[0];
        appContent.addEventListener('scroll', handleScroll.bind(this));
    }
    showCommdity(id) {
        this.setState({
            isShowCommdity: true,
            commodity: {}
        })
    }
    hideCommdity() {
        this.setState({
            isShowCommdity: false
        })
    }
    render() {
        return (
            <Main>
                <Layout className="index">
                    <Top scrollTop={this.state.scrollTop} />
                    <Content className="index-content">
                        <CarouselBox />
                        <Column />
                        {/* <LimitedTime /> */}
                        <HotCommodityList title="热卖商品" onClick={(id) => this.showCommdity(id)} />
                        <HotCommodityList title="优惠商品" onClick={(id) => this.showCommdity(id)} />
                    </Content>
                    <Commodity data={this.state.commdity} show={this.state.isShowCommdity} onHide={() => this.hideCommdity()} />
                </Layout>
            </Main>
        )
    }
}
/**
 * 热门商品列表
 */
class HotCommodityList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: []
        };
    }
    componentDidMount() {
        var self = this;
        axios.get("./data/hotCommodityList.json", {}).then(
            (res) => {
                var data = res.data;
                self.setState({ list: data.result });
            }
        )
    }
    getList() {
        var list = this.state.list, arr = [];
        for (var i = 0, l = list.length; i < l; i++) {
            arr.push(<HotCommodity commodity={list[i]} key={i} onClick={(id) => this.props.onClick(id)} />);
        }
        return arr;
    }
    render() {
        return (
            <div className="hotCommodity">
                <div className="title">
                    {this.props.title}
                </div>
                <Row className="hotCommodityList">
                    {this.getList()}
                </Row>
            </div>
        )
    }
}
class HotCommodity extends Component {
    render() {
        return (
            <Col span={12} className="commodity" onClick={() => this.props.onClick(this.props.commodity.id)}>
                <div className="img">
                    <img src={this.props.commodity.imgPath} />
                </div>
                <div className="name">{this.props.commodity.name}</div>
                <div className="desc">{this.props.commodity.desc}</div>
                <div className="price">￥{this.props.commodity.price}</div>
            </Col>
        )
    }
}
/**
 * 限时秒杀
 */
class LimitedTime extends Component {
    render() {
        return (
            <Row gutter={0} className="limitedTime">
                <Col span={10}>
                    <img alt="图" src="./images/1.png" />
                </Col>
                <Col span={14}>
                    <img alt="图" src="./images/1.png" />
                </Col>
                <Col span={14}>
                    <img alt="图" src="./images/1.png" />
                </Col>
                <Col span={10}>
                    <img alt="图" src="./images/1.png" />
                </Col>
            </Row>
        )
    }
}
/**
 * 栏目列表
 */
class Column extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: []
        };
    }
    componentDidMount() {
        var self = this;
        axios.get("./data/column.json", {}).then(
            (res) => {
                var data = res.data;
                self.setState({ list: data.result });
            }
        )
    }

    getColumnCol() {
        const list = this.state.list;
        var childs = [];
        for (let i = 0, l = list.length; i < l; i++) {
            childs.push((<Col span={6} key={i}>
                <div className="icon">
                    <img src={list[i].icon} />
                </div>
                <div className="text">
                    {list[i].text}
                </div>
            </Col>));
        }
        return childs;
    }
    render() {
        return (
            <Row gutter={8} className="column">
                {this.getColumnCol()}
            </Row>
        )
    }
}
/**
 * 走马灯
 */
class CarouselBox extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: []
        };
    }
    componentDidMount() {
        var self = this;
        axios.get("./data/carousel.json", {}).then(
            (res) => {
                var data = res.data;
                self.setState({ list: data.result });
            }
        )
    }
    getList() {
        var list = this.state.list, arr = [];
        for (var i = 0, l = list.length; i < l; i++) {
            arr.push(<div key={i} ><img width="100%" src={list[i]} /></div>);
        }
        return arr;
    }
    render() {
        return (
            <Carousel autoplay>
                {this.getList()}
            </Carousel>
        )
    }
}
/**
 * 最上部 搜索
 */
class Top extends Component {
    render() {
        var bgcolor = "rgba(236, 97, 97," + this.props.scrollTop / 300 + ")";
        return (
            <Row gutter={8} className="top-box " style={{ backgroundColor: bgcolor }}>
                <Col span={5} >
                    广州市
                    </Col>
                <Col span={15} className="top-box-search">
                    <Input.Search placeholder="请输入关键字搜索" />
                </Col>
                <Col span={4} className="top-box-user">
                    <NavLink to="./my">
                        <Icon type="user" />
                    </NavLink>
                </Col>
            </Row>
        )
    }
}
export default Index;